<template lang="html">
  <div class="container" v-loading="loading">
    <div class="search">
        <el-form :inline="true" class="demo-form-inline">
            <el-form-item>
              <el-input class="form_input" v-model="searchText" placeholder="请输入订单编号/客户姓名/设计师姓名/店铺名称/产品名称"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" :disabled="loading" size="small" @click="onSubmit">搜索</el-button>
              <el-button type="primary" :disabled="isShutdownAudit" size="small" @click="onAuidt">一键验收</el-button>
            </el-form-item>
            <el-form-item>
                <el-select v-model="shippingMethod" @change="onSubmit">
                    <el-option label="配送方式" value=""></el-option>
                    <el-option label="快递配送" value="1"></el-option>
                    <el-option label="公司自提" value="2"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-select v-model="orderType" @change="onSubmit">
                    <el-option label="订单类型" value=""></el-option>
                    <el-option label="定制订单" value="1"></el-option>
                    <el-option label="大货订单" value="2"></el-option>
                </el-select>
            </el-form-item>

        </el-form>
        <div class="export_excl">
          <el-button size="small" :disabled="isShutdownAudit" @click="exportExcl" type="primary">导出<i class="el-icon-upload el-icon--right"></i></el-button>
        </div>
    </div>

    <div class="tables">
      <vTable :tableData="tableData" ref="vTable" :tInData="tInData" @onCheckAll="onCheckAll" @onCheck="onCheck">
          <template slot="产品" slot-scope="scope">
            <div class="pro">
                <div class="pro_image">
                  <img :src="scope.row.picUrl" alt="" />
                </div>
                <div class="pro_info">
                  <div class="pro_name">{{scope.row.commodityName}}</div>
                  <div class="num_color">{{scope.row.materialName}}/{{scope.row.color}}/{{scope.row.laceName}}x{{scope.row.commodityNum}}</div>
                  <div class="address">地址：{{scope.row.address}}</div>
                </div>
            </div>
          </template>
          <template slot="客户" slot-scope="scope">
            <div class="userinfo">
              <p>ID：{{scope.row.memberId}}</p>
              <p>姓名：{{scope.row.userName}}</p>
              <p>手机号：{{scope.row.phone}}</p>
            </div>
          </template>

          <template slot="姓名签" slot-scope="scope">
            <div class="">{{scope.row.orderNameSign || scope.row.nameSign}}</div>
          </template>
          <template slot="配送方式" slot-scope="scope">
            <p v-if="scope.row.shippingMethod == 1">快递配送</p>
            <p v-if="scope.row.shippingMethod == 2">公司自提</p>
          </template>
          <template slot="备注" slot-scope="scope">
            <div class="remarks">
                <p>{{scope.row.remark}}</p>
                <el-button type="text" icon="el-icon-view" @click="handleClick(scope.row)"></el-button>
            </div>
          </template>
          <template slot="状态" slot-scope="scope">
            <div class="">
              <el-switch @change="onSwitch(scope.row)" v-model="scope.row.opState" :inactive-value="2" :active-value="1" active-color="#4196FF" inactive-color="#D7D7D7"></el-switch>
            </div>
          </template>
          <template slot="操作" slot-scope="scope">
            <div style="padding:0 10px;line-height: 40px;">
              <el-button size="mini" type="primary" @click="handleEdit(scope.row)">验收</el-button>
              <el-button size="mini" type="danger" @click="handleDetail(scope.row)">详情</el-button>
            </div>
          </template>
      </vTable>

    </div>

    <pagination @handleSizeChange="handleSizeChange" @handleCurrentChange="handleCurrentChange" :currentPage="currentPage" :totalPage="totalPage" />

    <el-dialog title="查看备注" v-loading="loading" :visible.sync="dialogVisible2" :append-to-body="true" width="35%">
        <div class="">{{rows.remark}}</div>
    </el-dialog>
    <el-dialog title="订单验收"  v-loading="loading" :visible.sync="dialogVisible" :append-to-body="true" width="750" :close-on-click-modal="false">
          <div class="audit_dialog">
              <div class="el_radio_box">
                  <span>验收结果：</span>
                  <el-radio class="el_radio" v-model="form.isCheckSuccess" label="1">验收通过</el-radio>
                  <el-radio class="el_radio" v-model="form.isCheckSuccess" label="2">验收不通过</el-radio>
              </div>
              <div class="" v-show="form.isCheckSuccess == 2">
                  <div class="el_radio_box">
                    <span>驳回原因：</span>
                    <el-input type="textarea" :rows="2" placeholder="请输入驳回原因" v-model="form.checkReason"></el-input>
                  </div>
                  <div class="el_radio_box">
                    <span>上传图片：</span>
                    <!-- <el-upload class="avatar-uploader" action="" :file-list="fileList" :auto-upload="false" list-type="picture-card" :on-remove="handleRemoveFile" :on-change="handleAvatarSuccess">
                      <i class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload> -->
                    <div style="min-height:150px;zoom:.6">
                        <el-upload list-type="picture-card" :action="oss_url"  :file-list="fileList2"
                             :on-remove="handleRemove2" :auto-upload="true"
                            :limit="9" :on-exceed="pic_exceed" :show-file-list="true" :on-success="upload_success2"
                            :on-error="upload_error2">
                            <i class="el-icon-plus"></i>
                        </el-upload>
                    </div>
                  </div>
              </div>
          </div>
          <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="confirm">确 定</el-button>
          </span>
    </el-dialog>
  </div>
</template>

<script>
import { baseUrl } from '@/api/http';
import { success1, warning1, cancel1 } from '@/api/utils';
export default {
  data(){
    return {
        //上传图片start
        //图片相关代码:
        dialogImageUrl: '',//放大图片的url
        dialogVisible: false,//放大图片的显示隐藏
        oss_url: baseUrl + '/receive/uploadImg',//上传图片oss路径
        fileList2: [],
        all_imgs:"",
        //上传图片end
      loading: false,
      searchText: '',
      shippingMethod:'',
      orderType:'',
      currentPage: 1,
      totalPage: 0,
      pageSize: 10,
      dialogVisible: false,
      dialogVisible2: false,
      currentRowData: null,
      tableData: [],
      selectData:[],
      tInData:[
        {
          props: 'orderSublistId',
        },
        {
          props: 'createTime',
        },
        {
          props: 'auditSuccessTime',
        },
        {
          title: '产品',
          width: '350px',
        },
        {
          title: '姓名签',
          width: '120px',
        },
        {
          title: '销售金额',
          props: 'commodityPrice',
          width: '120px',
        },
        {
          title: '店铺',
          props: 'branchStoreName',
          width: '200px',
        },
        {
          title: '客户',
          width: '200px',
        },
        {
          title: '设计师',
          props: 'designerName',
          width: '120px',
        },
        {
          title: '成交价格',
          props: 'successPrice',
          width: '120px',
        },
        {
          title: '结算价格',
          props: 'realPrice',
          width: '120px',
        },
        {
          title: '配送方式',
          width: '120px',
        },
        {
          title: '备注',
          width: '200px',
        },
        {
          title: '状态',
          width: '120px',
        },
        {
          title: '操作',
        },
      ],
      form:{},
      fileList: null,
      rows: {}
    }
  },
  computed:{
    isShutdownAudit:function(){
        return this.selectData.length == 0?true:false;
    }
  },
  created(){
    this.selectOrderCheckPage();
  },
  methods:{
      exportExcl(){
          let ids = [];
            this.selectData.forEach(item => {
                ids.push(item.orderSublistId);
            });
            window.open(baseUrl + '/receive/receiveCheckExportOrders?orderSublistIds=' + ids.join(','), '_self');
      },
    selectOrderCheckPage(){
      this.loading = true;
      this.$http.selectOrderCheckPage({
        shippingMethod: this.shippingMethod,
        orderType: this.orderType,
        query: this.searchText,
        pageSize: this.pageSize,
        pageNumber: this.currentPage
      }).then(res=>{
        this.loading = false;
        this.tableData = Object.assign([], res.data.rows);
        this.tableData.forEach(item=>{
          if(item.createTime){
            item.createTime = this.formatTime(item.createTime);
          }
        })
        this.totalPage = res.data.total;
        this.pageSize = res.data.pageSize;
      });
    },
    formatTime(value) {
      if(!value) return '';
      let oDate = new Date(value);
      let h = oDate.getHours()<10?'0'+oDate.getHours():oDate.getHours();
      let m = oDate.getMinutes()<10?'0'+oDate.getMinutes():oDate.getMinutes();
      let s = oDate.getSeconds()<10?'0'+oDate.getSeconds():oDate.getSeconds();
      return oDate.getFullYear()+'-'+(oDate.getMonth()+1)+'-'+oDate.getDate()+' '+h+':'+m+':'+s;
    },
    handleClick(e){
      this.rows = e;
      this.dialogVisible2 = true;
    },
    handleEdit(e){
      this.fileList2 = [];
      this.all_imgs = "";
      this.form = {};
      this.currentRowData = e;
      this.dialogVisible = true;
    },
    checkOrder(data){
      this.$http.checkOrder(data).then(res=>{
        this.loading = false;
        if(res.data.code == 0){
          this.$message.success(res.data.message);
          this.dialogVisible = false;
          this.onSubmit();
        }else{
          this.$message.error(res.data.message);
        }
      });
    },
    checkOrders(data){
      this.$http.checkOrders(data).then(res=>{
        this.loading = false;
        if(res.data.code == 0){
          this.$message.success(res.data.message);
          this.dialogVisible = false;
          this.onSubmit();
        }else{
          this.$message.error(res.data.message);
        }
      });
    },
    handleDetail(e){
      let {href} = this.$router.resolve({ path: '/receive/acceptance/detail',query:{id:e.orderSublistId}});
      window.open(href, '_blank');
    },
    handleAvatarSuccess(file){
      this.form.file = file.raw;
      this.fileList.push({url: file.url});
    },
    handleRemoveFile(file){
      this.form.file = null;
      this.fileList = [];
    },
    onAuidt(){
      this.currentRowData = null;
      this.fileList = [];
      this.fileList2 = [];
      this.all_imgs = "";
      this.form = {};
      this.dialogVisible = true;
    },
    confirm(){
      if(!this.form.isCheckSuccess){
        this.$message.error('请验收完再提交！');
        return false;
      }
      this.loading = true;
      var isCheckSuccess = this.form.isCheckSuccess;
      var checkReason = this.form.checkReason;
      var checkImg = this.all_imgs;
      if(isCheckSuccess == "1"){
          checkReason = "";
          checkImg = "";
      }
      if(this.currentRowData){
          var data = {
              orderSublistId:this.currentRowData.orderSublistId,
              isCheckSuccess,
              checkReason,
              checkImg,
          }
        this.checkOrder(data);
      }else{
        let aId = [];
        this.selectData.forEach(item=>{aId.push(item.orderSublistId)});
        var data = {
              orderSublistIds:aId.join(','),
              isCheckSuccess,
              checkReason,
              checkImg,
          }
        this.checkOrders(data);
      }
    },
    // confirm(){
    //   if(!this.form.isCheckSuccess){
    //     this.$message.error('请验收完再提交！');
    //     return false;
    //   }
    //   let formData = new FormData();
    //   for(var i in this.form){
    //     formData.append(i,this.form[i]);
    //   }
    //   this.loading = true;
    //   if(this.currentRowData){
    //     formData.append('orderSublistId',this.currentRowData.orderSublistId);
    //     this.checkOrder(formData);
    //   }else{
    //     let aId = [];
    //     this.selectData.forEach(item=>{aId.push(item.orderSublistId)});
    //     formData.append('orderSublistIds',aId.join(','));
    //     this.checkOrders(formData);
    //   }
    // },
    onCheckAll(val){
      if(val.status){
        this.selectData = [];
        this.tableData.forEach((item,index)=>{
          this.selectData.push(item);
        })
      }else{
        this.selectData = [];
      }
    },
    onCheck(val){
      if(val.status){
        this.tableData.forEach((item,index)=>{
          if(val.index == index){
            this.selectData.push(item);
          }
        })
      }else{
        this.selectData = this.selectData.filter(arr=>(arr.id!==this.tableData[val.index].id))
      }
    },
    onSwitch(e){
      this.$http.closeOrderCheck({orderSublistId: e.orderSublistId,opState:e.opState}).then(res=>{
        if(res.data.code===0){
            this.$message.success(res.data.message);
        }else{
            this.$message.error(res.data.message);
        }
      })
    },
    onSubmit(){
      this.handleCurrentChange(1);
    },
    handleSizeChange(e){
      this.pageSize = e;
      this.handleCurrentChange(1);
    },
    handleCurrentChange(e){
      this.$refs.vTable.onCheckAll(false);
      this.$refs.vTable.checkAll = false;
      this.selectData = [];
      this.currentPage = e;
      this.selectOrderCheckPage();
    },
    //多个图片处理
        handleRemove2(file, fileList) {
            var temp = [];
            for (var i in fileList) {
                if (fileList[i].response && fileList[i].response.code == "0") {
                    temp.push(fileList[i].response.data)
                } else if (fileList[i].status == "success" && fileList[i].url) {
                    temp.push(fileList[i].url)
                }
            }
            this.all_imgs = temp.join(";");
        },
        handlePictureCardPreview2(file) {
            this.dialogImageUrl = file.url;
            this.dialogVisible = true;
        },
        upload_success2(res, file, fileList) {
            var temp = [];
            if (res && res.code == "0") {
                for (var i in fileList) {
                    if (fileList[i].response && fileList[i].response.code == "0") {
                        temp.push(fileList[i].response.data)
                    } else if (fileList[i].status == "success" && fileList[i].url) {
                        temp.push(fileList[i].url)
                    }
                }
                this.all_imgs = temp.join(";");
                success1(this, "图片上传成功")
            } else {
                warning1(this, "图片上传失败")
            }
        },
        upload_error2(err, file, fileList) {
            warning1(this, "图片上传失败")
        },
        //超过数量了
        pic_exceed(file, fileList) {
            warning1(this, "最多上传9张图片")
        },

  }
}
</script>

<style lang="css" scoped>
.search {
    position: relative;
}
.export_excl {
    position: absolute;
    right: 0;
    top: 0;
}
</style>
